<?php require VIEWPATH . ADMIN_DIR . DIRECTORY_SEPARATOR . 'sub' . DIRECTORY_SEPARATOR .'header.php'?>
<style>
	#cboxClose {
		text-indent: 0;
		font-size: 50px;
		font-weight: bold;
		margin-top: 10px;
		color: red;
	}
</style>
<div class="ant-card page-wrap com-card static-page___2-4kT">
    <div class="ant-card-head">
        <div class="ant-card-head-wrapper">
            <div class="ant-card-head-title">友情链接管理</div>
        </div>
    </div>
    <div class="outer-table">
        <div>
            <a href="#modal-link" class="btn-send show-link-dialog" data-toggle="modal">添加友情链接</a>    
        </div>
        <!-- 学校表格 -->
        <table id="dynamic-table" class="table table-bordered table-hover mt10">
            <thead>
            <tr>
                <th>链接标题</th>
				<th width="12%">链接图片</th>
				<th>链接地址</th>
				<th width="10%">链接排序</th>
				<th width="12%">创建时间</th>
				<th width="18%">操作</th>
            </tr>
            </thead>
            <tbody>
                <?php foreach($linkList as $link): ?>
                    <tr>
                        <td><?=$link['link_name'] ?></td>
						<td>
							<?php if($link['link_image']): ?>
								<div class="ace-thumbnails">
									<a href="<?= $link['link_image'] ?>" data-rel="colorbox" class="cboxElement">
										<img src="<?= $link['link_image'] . '!thumb' ?>" width="64"/>
									</a>
								</div>				
							<?php endif ?>	
						</td>
                        <td style="word-wrap:break-word;"><?=$link['link_src']?></td>
                        <td><?=$link['link_sort']?></td>
                        <td><?=$link['createtime']?></td>
                        <td>
							<a class="a-edit mr20 show-link-dialog" href="#modal-link" data-toggle="modal" data-id="<?=$link['id']?>" data-title="<?=$link['link_name']?>" 
							data-sort="<?=$link['link_sort']?>" data-link="<?=$link['link_src']?>" data-image="<?=$link['link_image']?>">
								修改
							</a>
                            <a class="a-delete" href="#modal-delete" data-toggle="modal" class="ml20 text-danger delete-link" data-id="<?=$link['id']?>">删除</a>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<!-- 友情链接弹窗 -->
<div id="modal-link" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white"><img src="<?=$staticAdminUrl?>sub/assets/img/cms/no.png" style="height:18px;width:18px;"></span>
					</button>
					友情链接管理
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10" id="link-form">
							<input type="hidden" name="id" />
							<input type="hidden" name="link_image" />
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">链接标题</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="link_title" placeholder="请填写友情链接标题"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">链接地址</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="link_src" placeholder="请填写友情链接地址"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">
									<a href="javascript:;" data-rel="tooltip" data-original-title="建议图片尺寸：88 * 31">
										<img src="<?=$staticAdminUrl?>sub/assets/img/cms/question.png" style="height:16px;width:16px;margin-bottom:3px;">
									</a> 链接图片
								</label>
								<div class="col-sm-8" style="margin-top:12px;">
									<a href="javascript:;" id="upload-img">
										<img class="" src="" width="80" height="98" />
									</a>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">链接排序</label>
								<div class="col-sm-8">
									<input class="form-control" type="number" name="link_sort" placeholder="选填。请填写友情链接排序，根据序号从高往低排"/>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top">
				<a href="javascript:;" class="" id="save-link">保存</a>
			</div>
		</div>
	</div>
</div>
<!-- 删除弹窗 -->
<div id="modal-delete" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white"><img src="<?=$staticAdminUrl?>sub/assets/img/cms/no.png" style="height:18px;width:18px;"></span>
					</button>
					信息
				</div>
			</div>
			<div class="modal-body no-padding">
				<input type="hidden" name="delete_id" />
				<div class="row">
					<div class="col-xs-12">
						<div class="outer-tip">
							<div>
								<img src="<?=$staticAdminUrl?>sub/assets/img/cms/warn.png" alt="">
							</div>
							<div class="tip col-xs-12">确定要删除该链接吗？</div>
						</div>
						
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top">
				<a href="javascript:;" class="cancel" data-dismiss="modal" aria-hidden="true">取消</a>
				<a href="javascript:;" class="delete-link">确定</a>
			</div>
		</div>
	</div>
</div>
<?php require VIEWPATH . ADMIN_DIR . DIRECTORY_SEPARATOR . 'sub' . DIRECTORY_SEPARATOR .'footer.php'?>
<script>
    $(function() {
        var linkForm = $("#link-form");
		var uploadTarget = $("#upload-img");
		// 图标提示
		$(function(){
			$('[data-rel=tooltip]').tooltip();
		})
        // 显示修改弹窗
		$("body").on("click", ".show-link-dialog", function(){
            // alert(1);
			var imgLink = $(this).data("image");

			uploadTarget.find("img").attr("src", imgLink ? imgLink : '<?=$staticAdminUrl?>sub/assets/img/cms/add.png');
			linkForm.find("[name=id]").val($(this).data("id"));
			linkForm.find("[name=link_title]").val($(this).data("title"));
			linkForm.find("[name=link_sort]").val($(this).data("sort"));
			linkForm.find("[name=link_src]").val($(this).data("link"));
			linkForm.find("[name=link_image]").val($(this).data("image"));

			setTimeout(function(){
				uploadTarget.uploader({
					"server":  '<?=UP_FORM_URL?>',
					"authorization": "<?=$signature?>",
					"policy": "<?=$policy?>",
					"callback": function(response) {
						var imgFile = "<?=UP_URL?>" + response.url;
						uploadTarget.find("img").attr("src", imgFile);
						linkForm.find("[name=link_image]").val(imgFile);
					}
				});
			}, 200)
		})
		// 显示删除弹窗
		$("body").on("click", ".a-delete", function(){
			var id = $(this).data("id");
			$("[name=delete_id]").val(id);
		})
		// 删除友情链接
		$("body").on("click", ".delete-link", function(e){
			var id = $("[name=delete_id]").val();
			// 提交数据
			var postUrl = "<?=admin_url('cms/delete_link_action')?>";
			var postData = {"id": id};
			ajax_post(postUrl, postData, function(res){
				window.location.reload();
			})
		})
		// 提交表单
		$("#save-link").click(function(){
			linkForm.submit();
		})
		var submitImgUrl = "<?=admin_url('cms/save_link_action')?>";
		form_submit(linkForm, submitImgUrl, function(res) {
			tips_alert(res.msg, res.success, function(){
				if(res.success) {
					window.location.reload();
				}
			});
		});
		// 图片轮播
		var colorbox_params = {
			rel: 'colorbox',
			reposition:true,
			scalePhotos:true,
			scrolling:false,
			previous:'<i class="ace-icon fa fa-arrow-left"></i>',
			next:'<i class="ace-icon fa fa-arrow-right"></i>',
			close:'&times;',
			current:'',
			maxWidth:'100%',
			maxHeight:'100%',
			onOpen:function(){
				$overflow = document.body.style.overflow;
				document.body.style.overflow = 'hidden';
			},
			onClosed:function(){
				document.body.style.overflow = $overflow;
			},
			onComplete:function(){
				$.colorbox.resize();
			}
		};
		$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
    })
</script>